<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>首页 - 驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <script src="${request.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
    <script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${request.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
    <script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="${request.contextPath}/assets/js/bootbox.min.js"></script>
    <script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
    <script src="${request.contextPath}/assets/js/spin.min.js"></script>
    <!-- ace scripts -->
    <script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
    <script src="${request.contextPath}/assets/js/ace.min.js"></script>
    <!-- validator scripts -->
    <script src="${request.contextPath}/assets/js/bootstrapValidator.min.js"></script>
    <!-- user scripts -->
    <script src="${request.contextPath}/assets/js/user/base.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <!--<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css"/>-->
    <link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css"/>
    <!-- text fonts -->
    <link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css"/>
    <!-- BootstrapValidator -->
    <link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css">
    <link rel="stylesheet" href="${request.contextPath}/stylesheets/tips.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <!-- ace settings handler -->
    <script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
    <style>
        .table > thead > tr {
            background: linear-gradient(rgb(248, 248, 248) 0px, rgb(236, 236, 236) 100%) repeat-x rgb(242, 242, 242) !important;
        }

    </style>
</head>

<body class="no-skin" style="background-color: #FFF;">
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="widget-box">
                <div class="widget-header widget-header-small">
                    <h5 class="widget-title lighter">筛选条件(数据来源v7.8.1及以后版本)</h5>
                </div>
                <div class="widget-body" style="background-color: #EFF3F8;">
                    <div class="widget-main">
                        <form class="form-inline" id="searchForm" method="post" action="#">
                            <div class="form-group">
                                <label for="exampleInputName2">选择时段</label>
                                <input type="text" id="config-demo" name="chooseTimeVO" class="form-control time">
                                <button id="app_search" type="button" onclick="replaceDate(this,'1');"
                                        class="btn btn-white btn-sm">
                                    <span class="ace-icon icon-on-right bigger-110"></span>
                                    昨日
                                </button>
                                <button id="app_search" type="button" onclick="replaceDate(this,'7');"
                                        class="btn btn-white btn-sm">
                                    <span class="ace-icon icon-on-right bigger-110"></span>
                                    过去7天
                                </button>
                                <button id="app_search" type="button" onclick="replaceDate(this,'31');"
                                        class="btn btn-white btn-sm">
                                    <span class="ace-icon icon-on-right bigger-110"></span>
                                    过去31天
                                </button>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">平台</label>
                                <select data-placeholder="" class="chosen-select" tabindex="2"
                                        name="plat_form" id="plat_form">
                                    <option value="">全部</option>
                                    <option value="pc">PC</option>
                                    <option value="wap">WAP</option>
                                    <option value="app">APP-全部</option>
                                    <option value="ios">APP-IOS</option>
                                    <option value="android">APP-安卓</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">页面业务类型</label>
                                <select data-placeholder="" class="chosen-select" tabindex="2"
                                        name="category_id" id="category_id" onChange="selectCategory();">
                                    <option value="3PinD">频道页</option>
                                    <option value="3zhTi">专题页</option>
                                    <option value="3XagQ">详情页</option>
                                    <option value="3TXDD">填写订单页</option>
                                    <option value="3DaiZ">待支付页</option>
                                    <option value="3ZhiW">支付完成页</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">页面名称</label>
                                <select data-placeholder="" class="chosen-select" tabindex="2"
                                        name="page_code" id="page_code">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="">流量类型</label>
                                <select data-placeholder="" class="chosen-select" tabindex="2"
                                        name="flowType" id="flowType">
                                    <option value="pv">PV</option>
                                    <option value="uv">UV</option>
                                    <option value="session">SESSION</option>
                                </select>
                            </div>
                            <div class="form-group" style="display: none" id = "productGroup">
                                <label >产品id</label>
								<input type="text" id ="productId">
                            </div>
                            <div class="form-group">
                                <button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                    Search
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="widget-box">
                <div class="widget-body">
                    <div class="widget-main">
                        <h4 class="pink">
                            <i class="ace-icon fa fa-hand-o-right green"></i>
                            <a href="#modal-form" role="button" class="blue" data-toggle="modal"> 页面名称：<span
                                    id="page_name">详情页-酒店(国内)</span> </a>
                        </h4>
                    </div>
                    <div class="widget-main row" id="data">
                        <div class="col-xs-6">
                            <div class="widget-box">
                                <div class="widget-body">
                                    <h4 style="text-align: center;">流量来源分布图</h4>
                                    <table id="table1"
                                           class="table table-striped table-bordered table-hover dataTable no-footer"
                                           role="grid" aria-describedby="dynamic-table_info">
                                        <thead id="tabDetail1">
                                        <tr>
                                            <td>页面业务类型</td>
                                            <td>页面名称</td>
                                            <td>流量数据(<span class ="flowType">PV</span>)</td>
                                            <td>占比</td>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6" style="padding-left: 0">
                            <div class="widget-box">
                                <div class="widget-body">
                                    <h4 style="text-align: center;">流量去向分布图</h4>
                                    <table id="table2"
                                           class="table table-striped table-bordered table-hover dataTable no-footer"
                                           role="grid" aria-describedby="dynamic-table_info">
                                        <thead id="tabDetail2">
                                        <tr>
                                            <td>页面业务类型</td>
                                            <td>页面名称</td>
                                            <td>流量数据(<span class ="flowType">PV</span>)</td>
                                            <td>占比</td>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <p></p>
            <div class="ui-jqgrid1">
                <div id="grid-pager"
                     class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                     dir="ltr">
                    <div id="pg_grid-pager" class="ui-pager-control" role="group">
                        <input type="text" id="currentPage" hidden="true" value=1>
                        <input type="text" id="page_size" value=20 hidden="true">
                        <input type="text" id="page_total" hidden="true">
                        <table cellspacing="0" cellpadding="0" border="0"
                               class="ui-pg-table"
                               style="width: 100%; table-layout: fixed; height: 100%;"
                               role="row">
                            <tbody>
                            <tr>
                                <td id="grid-pager_left" align="left"></td>
                                <td id="grid-pager_center" align="center"
                                    style="width: 300px;">
                                    <table
                                            cellspacing="0" cellpadding="0" border="0"
                                            style="table-layout: auto;" class="ui-pg-table">
                                        <tbody>
                                        <tr>
                                            <td id="first_grid-pager"
                                                onclick="showPage('firstPage')"
                                                class="ui-pg-button ui-corner-all "
                                                style="cursor: pointer;"><span
                                                    class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span>
                                            </td>
                                            <td id="prev_grid-pager"
                                                onclick="showPage('prePage')"
                                                class="ui-pg-button ui-corner-all "
                                                style="cursor: pointer;"><span
                                                    class="ui-icon ace-icon fa fa-angle-left bigger-140"></span>
                                            </td>
                                            <td dir="ltr">Page <input class="ui-pg-input" id="page_num"
                                                                      type="text" size="2" maxlength="7"
                                                                      disabled="true"
                                                                      value=""
                                                                      role="textbox"> of <span
                                                    id="sp_1_grid-pager"></span></td>
                                            <td id="next_grid-pager"
                                                onclick="showPage('nextPage')"
                                                class="ui-pg-button ui-corner-all "
                                                style="cursor: pointer;"><span
                                                    class="ui-icon ace-icon fa fa-angle-right bigger-140"></span>
                                            </td>
                                            <td id="last_grid-pager"
                                                onclick="showPage('lastPage')"
                                                class="ui-pg-button ui-corner-all "
                                                style="cursor: pointer;"><span
                                                    class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>

                                <td id="grid-pager_right" align="right">
                                    <div dir="ltr" style="text-align: right ;width: 600px;" class="ui-paging-info">View
                                        <span id="view_start_row"></span> - <span id="view_end_row"></span>
                                        of <span id="view_page_total"></span>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/assets/js/moment.min.js"></script>
<script src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/bootstrap.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/dateRange.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/g2.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/slider.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/g2-modal.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
<script type="text/javascript">
    d3.select(self.frameElement).style("height", "1600px");

    function searchClick() {
        var currentPage = '1';
        var pageSize = $("#page_size").val();
        ajaxData(currentPage, pageSize);
    }

    function ajaxData(currentPage, pageSize) {
        var chooseTime = $("#config-demo").val();
        var category_id = $("#category_id").val();
        var plat_form = $("#plat_form").val();
        var page_code = $("#page_code").val();
        var productId = $("#productId").val();
        var flowType = $("#flowType").val();
        $(".flowType").html($("#flowType").val());

        $.ajax({
            url: "${request.contextPath}/traffic/conversionlist",
            data: {
                "page_code": category_id,
                "category_id": page_code,
                "chooseTime": chooseTime,
                "plat_form": plat_form,
                "productId": productId,
                "flow_type": flowType,
                "pageCurrentNum": currentPage,
                "page_size": pageSize
            },
            dataType: "json",
            beforeSend: function () {
                $("#search").attr("disabled", true);
                openPartialLayer($("#data"));
            },
            complete: function () {
                $("#search").attr("disabled", false);
                removeLoading($("#data"));
            },
            success: function (data) {
                $(".mobileTab").remove();
                if (data != null) {
                    var page = data.data.fromList;
                    if (page.pages > 1) {
                        $("#page_total").val(page.pages);
                        $("#currentPage").val(page.pageNum);
                        $("#page_num").val(page.pageNum);
                        $("#sp_1_grid-pager")[0].innerText = page.pages;
                        $("#view_start_row")[0].innerText = page.startRow;
                        $("#view_end_row")[0].innerText = page.endRow;
                        $("#view_page_total")[0].innerText = page.total;
                        $(".ui-jqgrid1").show();
                    } else {
                        $(".ui-jqgrid1").hide();
                    }

                    var fromList = data.data.fromList.list;
                    var toList = data.data.toList.list;

                    var category_id_text = $('#category_id option:selected').text();
                    var page_code_text = $('#page_code option:selected').text();

                    var totalFlowData = '<div class="col-xs-12">' +
                        '<div class="widget-box">' +
                        '<div class="widget-body" style="background-color: #EFF3F8;">' +
                        '<div class="widget-main row">' +
                        '<div class="row">' +
                        '<div class="col-xs-4 col-xs-offset-1">' +
                        '<h4 >页面名称：<span id="page_name">' + category_id_text + '-' + page_code_text + '</span></h4>' +
                        '</div></div></div></div></div></div>';

                    $("#page_name")[0].innerText = category_id_text + '-' + page_code_text;
                    if (fromList != null && fromList.length > 0) {
                        var tbody = "";
                        $.each(fromList, function (n, value) {
                            if (value.parent_category_id == "周边游") {
                                tbody += "<tbody class='mobileTab'><tr>"
                                    + "<td>" + value.parent_page_code + "</td>"
                                    + "<td>" + value.parent_category_id + "(详情)" + "<div class='action-buttons show-details-btn'  style='cursor:pointer;'>"
                                    + "<a class='green bigger-140' title='Show Details' role='button'><i class='ace-icon fa fa-angle-double-down'></i> <span class='sr-only'>Details</span> </a>"
                                    + "</div></td>"
                                    + "<td>" + value.amount + "</td>"
                                    + "<td>" + value.rate + "%</td></tr></tbody>"
                                    + "<tbody class='detail-row mobileTab1' data-show='1' style='display:none' align='center'></tbody>";
                            } else {
                                tbody += "<tbody class='mobileTab'><tr>"
                                    + "<td>" + value.parent_page_code + "</td>"
                                    + "<td>" + value.parent_category_id + "</td>"
                                    + "<td>" + value.amount + "</td>"
                                    + "<td>" + value.rate + "%</td></tr></tbody>"
                                    + "<tbody class='detail-row mobileTab1' data-show='1' style='display:none' align='center'></tbody>";
                            }
                        })
                        $("#tabDetail1").after(tbody);
                    }

                    if (toList != null && toList.length > 0) {
                        var tbody = "";
                        $.each(toList, function (n, value) {
                            if (value.category_id == "周边游") {
                                tbody += "<tbody class='mobileTab'><tr>"
                                    + "<td>" + value.page_code + "</td>"
                                    + "<td>" + value.category_id + "(详情)" + "<div class='action-buttons show-details-btn'  style='cursor:pointer;'>"
                                    + "<a class='green bigger-140' title='Show Details' role='button'><i class='ace-icon fa fa-angle-double-down'></i> <span class='sr-only'>Details</span> </a>"
                                    + "</div></td>"
                                    + "<td>" + value.amount + "</td>"
                                    + "<td>" + value.rate + "%</td></tr></tbody>"
                                    + "<tbody class='detail-row mobileTab1' data-show='1' style='display:none' align='center'></tbody>";
                            } else {
                                tbody += "<tbody class='mobileTab'><tr>"
                                    + "<td>" + value.page_code + "</td>"
                                    + "<td>" + value.category_id + "</td>"
                                    + "<td>" + value.amount + "</td>"
                                    + "<td>" + value.rate + "%</td></tr></tbody>"
                                    + "<tbody class='detail-row mobileTab1' data-show='1' style='display:none' align='center'></tbody>";
                            }
                        })
                        $("#tabDetail2").after(tbody);
                    }

//                    MergeCell('table1', 1, 0, 0);
//                    MergeCell('table2', 1, 0, 0);
                }
            }
        });
    }

    function showPage(param) {
        var endrow = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#page_size").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        }
        else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        }
        else if ('nextPage' == param) {
            if (currentPage == endrow) {
                currentPage = endrow;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = endrow;
        }
        if (flag == 0) {
            ajaxData(currentPage, pageSize);
        }
    }

    $("#table1").on("click", '.show-details-btn', function (e) {
        e.preventDefault();
        var chooseTime = $("#config-demo").val();
        var category_id = $("#category_id").val();
        var plat_form = $("#plat_form").val();
        var page_code = $("#page_code").val();
        var tbody = "";
        tbody += "<tr class='detailHead'>" +
            "<td colspan='2'><strong>坑位名称</strong></td>" +
            "<td colspan='1'><strong>流量数据(PV)</strong></td>" +
            "<td colspan='1'><strong>占比</strong></td>" +
            "</tr>"
        $.ajax({
            url: "${request.contextPath}/traffic/channelDetailList",
            data: {
                "page_code": category_id,
                "category_id": page_code,
                "chooseTime": chooseTime,
                "plat_form": plat_form,
                "type":1
            },
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.data.list != null && data.data.list.length > 0) {
                    var list = data.data.list;
                    $.each(list, function (n, value) {
                        tbody += "<tr>" +
                            "<td colspan='2'>" + value.sk + "</td>" +
                            "<td colspan='1'>" + value.amount + "</td>" +
                            "<td colspan='1'>" + value.rate + "%</td>" +
                            "</tr>"
                    })
                } else {
                    tbody += '<tr><td colspan="6"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                }
            }
        })

        $(this).parents("tbody").next(".detail-row").html(tbody);
        $(this).parents("tbody").next(".detail-row").after();
        if ($(this).find(ace.vars['.icon']).hasClass('fa-angle-double-down')) {
            $(this).css("background-color","");
            $(this).parents("tbody").next(".detail-row").show();
        } else {
            $(this).parents("tbody").next(".detail-row").hide();
        }
        $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-up').toggleClass('fa-angle-double-down');
    });
    $("#table2").on("click", '.show-details-btn', function (e) {
        e.preventDefault();
        var chooseTime = $("#config-demo").val();
        var category_id = $("#category_id").val();
        var plat_form = $("#plat_form").val();
        var page_code = $("#page_code").val();
        var tbody = "";
        tbody += "<tr class='detailHead'>" +
            "<td colspan='2'><strong>坑位名称</strong></td>" +
            "<td colspan='1'><strong>流量数据(PV)</strong></td>" +
            "<td colspan='1'><strong>占比</strong></td>" +
            "</tr>"
        $.ajax({
            url: "${request.contextPath}/traffic/channelDetailList",
            data: {
                "page_code": page_code,
                "category_id": category_id,
                "chooseTime": chooseTime,
                "plat_form": plat_form,
                "type":2
            },
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.data.list != null && data.data.list.length > 0) {
                    var list = data.data.list;
                    $.each(list, function (n, value) {
                        tbody += "<tr>" +
                            "<td colspan='2'>" + value.sk + "</td>" +
                            "<td colspan='1'>" + value.amount + "</td>" +
                            "<td colspan='1'>" + value.rate + "%</td>" +
                            "</tr>"
                    })
                } else {
                    tbody += '<tr><td colspan="6"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                }
            }
        })

        $(this).parents("tbody").next(".detail-row").html(tbody);
        $(this).parents("tbody").next(".detail-row").after();
        if ($(this).find(ace.vars['.icon']).hasClass('fa-angle-double-down')) {
            $(this).parents("tbody").next(".detail-row").show();
        } else {
            $(this).parents("tbody").next(".detail-row").hide();
        }
        $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-up').toggleClass('fa-angle-double-down');
    });

    $(function () {
        selectCategory();
        setTimeout(function () {
            searchClick()
        }, 2000);
        /* 数值每3位，逗号隔开 */
        function formatNum(strNum) {
            if (strNum.length <= 3) {
                return strNum;
            }
            if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
                return strNum;
            }
            var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
            var re = new RegExp();
            re.compile("(\\d)(\\d{3})(,|$)");
            while (re.test(b)) {
                b = b.replace(re, "$1,$2$3");
            }
            return a + "" + b + "" + c;
        }
    });

    function MergeCell(tableId, startRow, endRow, col) {
        var tb = document.getElementById(tableId);
        if (col >= tb.rows[0].cells.length) {
            return;
        }
        //当检查第0列时检查所有行
        if (col == 0 || endRow == 0) {
            endRow = tb.rows.length - 1;
        }

        for (var i = startRow; i < endRow; i++) {
            //程序是自左向右合并
            if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
                //如果相同则删除下一行的第0列单元格
                tb.rows[i + 1].cells[col].style.display = 'none';
                //更新rowSpan属性
                tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
                //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
                if (i == endRow - 1 && startRow != endRow) {
                    MergeCell(tableId, startRow, endRow, col + 1);
                }
            } else {
                //起始行，终止行不变，检查下一列
                MergeCell(tableId, startRow, i, col + 1);
                //增加起始行
                startRow = i + 1;
            }
        }
    }
</script>

<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.css"/>
<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>

<script>
    $(function () {
        $('.chosen-select').chosen();
        $('.chosen-select-deselect').chosen({allow_single_deselect: true});
    });

    function statistics() {
        $('#statistics').show();
        $('.chosen-select').chosen("destroy").chosen();
        $('.chosen-select-deselect').chosen({allow_single_deselect: true});
    }
    function selectCategory() {
        var category_id_text = $("#category_id").val();

        if (category_id_text == "3XagQ"){
            $("#productGroup").show();
        }else{
            $("#productGroup").hide();
            $("#productId").val("");
        }
        $.ajax({
            url: '${request.contextPath}/traffic/queryPageCode',
            type: "POST",
            data: {
                categoryId: category_id_text
            },
            success: function (data) {
                if (data.data.code == 1) {
                    var list = data.data.msg;
                    var html = '';
                    for (var i = 0; i < list.length; i++) {
                        html += '<option value="' + list[i].value + '">' + list[i].name + '</option>';
                    }
                    $("#page_code").html(html);
                    $('#page_code').chosen("destroy").chosen();
                }
            },
            error: function (data) {
            }
        });
    }
</script>
</body>
</html>